<template>
    <view>
        <!-- pages/collectioncode/bindcard/auths/index.wxml -->
        <view>
            <van-cell-group class="mt-20" v-if="main == '个体' || mainOld == '小微商户'">
                <view class="text-r pd-20">结算卡仅支持借记卡，请勿上传贷记卡，贷记卡会无法进行结算!</view>
                <view class="text-r pd-20">银行账号开户名需与上传的身份证名称一致。否则将会审核不通过或造成资金安全风险!</view>
                <van-field
                    :value="accountName"
                    label="开户名"
                    placeholder="请输入开户名"
                    :border="false"
                    @change="onChange($event, { name: 'accountName' })"
                    data-name="accountName"
                />
                <van-field
                    :value="accountNo"
                    label="银行账号"
                    placeholder="请输入银行账号(勿使用二类卡)"
                    :border="false"
                    @change="onChange($event, { name: 'accountNo' })"
                    data-name="accountNo"
                />
                <van-cell
                    class="custom-class"
                    title="开户地址"
                    center
                    is-link
                    :value="zbankRegionCodeSiteName || '请选择开户地址'"
                    @tap.native.stop.prevent="onshowModal($event, { name: 'isShowAreaCodeTree', type: 'kh' })"
                    data-name="isShowAreaCodeTree"
                    data-type="kh"
                />
                <van-cell
                    class="custom-class"
                    title="开户支行"
                    center
                    is-link
                    :value="openUnionNoName || '请选择开户支行'"
                    @tap.native.stop.prevent="onshowModal($event, { name: 'isShowBank', bank: 'zbankRegionCode' })"
                    data-name="isShowBank"
                    data-bank="zbankRegionCode"
                />
                <view v-if="account == '非法人'">
                    <van-field
                        :value="agentCardNo"
                        label="开户身份证号"
                        placeholder="请输入身份证号"
                        :border="false"
                        @change="onChange($event, { name: 'agentCardNo' })"
                        data-name="agentCardNo"
                        maxlength="18"
                    />
                    <view class="flexbox-sb combox">
                        <text class="text">身份证永久有效</text>
                        <van-switch size="20px" :checked="idCardValidity" @change="onChangeStatus($event, { name: 'idCardValidity' })" data-name="idCardValidity" />
                    </view>
                    <view>
                        <van-cell
                            class="custom-class"
                            title="起始有效期"
                            center
                            is-link
                            :value="idCardValidityStart || '请选择起始有效期'"
                            @tap.native.stop.prevent="onshowModal($event, { name: 'isShowTime', timeName: 'idCardValidityStart' })"
                            data-name="isShowTime"
                            data-timeName="idCardValidityStart"
                        />
                        <van-cell
                            v-if="!idCardValidity"
                            class="custom-class"
                            title="结束有效期"
                            center
                            is-link
                            :value="idCardValidityEnd || '请选择结束有效期'"
                            @tap.native.stop.prevent="onshowModal($event, { name: 'isShowTime', timeName: 'idCardValidityEnd' })"
                            data-name="isShowTime"
                            data-timeName="idCardValidityEnd"
                        />
                    </view>
                </view>
                <view class="imgbox" v-if="account != '对公'">
                    <view class="imgitem">
                        <view @tap.stop.prevent="onDownImg" data-name="bankCard">
                            <image class="img_data" :src="bankCardUrl || shopimgUrl + 'noimgsee.png'" />
                            <view class="img_name">银行卡正面照</view>
                        </view>
                        <view>
                            <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'yhkz.jpg'" :src="shopimgUrl + 'yhkz.jpg'" />
                            <view class="img_name">样例</view>
                        </view>
                    </view>
                </view>
                <view class="imgbox" v-if="account == '对公'">
                    <view class="imgitem">
                        <view @tap.stop.prevent="onDownImg" data-name="openAccountLicenses">
                            <image class="img_data" :src="openAccountLicensesUrl || shopimgUrl + 'noimgsee.png'" />
                            <view class="img_name">开户许可证</view>
                        </view>
                        <view>
                            <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'dgxkz.jpg'" :src="shopimgUrl + 'dgxkz.jpg'" />
                            <view class="img_name">样例</view>
                        </view>
                    </view>
                </view>
                <view v-if="account == '非法人'">
                    <view class="imgbox">
                        <view class="imgitem">
                            <view @tap.stop.prevent="onDownImg" data-name="agentIdCardFront">
                                <image class="img_data" :src="agentIdCardFrontUrl || shopimgUrl + 'noimgsee.png'" />
                                <view class="img_name">被委托人身份证人像面</view>
                            </view>
                            <view>
                                <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'sfzrx.jpg'" :src="shopimgUrl + 'sfzrx.jpg'" />
                                <view class="img_name">样例</view>
                            </view>
                        </view>
                        <view class="imgitem mt-20">
                            <view @tap.stop.prevent="onDownImg" data-name="agentIdCardBack">
                                <image class="img_data" :src="agentIdCardBackUrl || shopimgUrl + 'noimgsee.png'" />
                                <view class="img_name">被委托人身份证国徽面</view>
                            </view>
                            <view>
                                <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'sfzgh.jpg'" :src="shopimgUrl + 'sfzgh.jpg'" />
                                <view class="img_name">样例</view>
                            </view>
                        </view>
                        <view class="imgitem mt-20">
                            <view @tap.stop.prevent="onDownImg" data-name="agentProtocol">
                                <image class="img_data" :src="agentProtocolUrl || shopimgUrl + 'noimgsee.png'" />
                                <view class="img_name">委托结算授权书</view>
                            </view>
                            <view>
                                <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'wtxy.png'" :src="shopimgUrl + 'wtxy.png'" />
                                <view class="img_name">样例</view>
                            </view>
                        </view>
                        <view class="text-xz" @tap.stop.prevent="onDown">《委托结算授权书》下载</view>
                        <view class="imgitem mt-20">
                            <view @tap.stop.prevent="onDownImg" data-name="holdAgentProtocol">
                                <image class="img_data" :src="holdAgentProtocolUrl || shopimgUrl + 'noimgsee.png'" />
                                <view class="img_name">法人手持委托清算协议照片</view>
                            </view>
                            <view>
                                <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'scwtxy.jpg'" :src="shopimgUrl + 'scwtxy.jpg'" />
                                <view class="img_name">样例</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="text-6">若商户无开户许可证，可提供印鉴卡、对公账户流水单或加盖公司公章的账户证明。</view>
                <view class="imgbox">
                    <view class="imgitem">
                        <view>
                            <image class="img_data" :data-item="shopimgUrl + 'yjk.jpg'" :src="shopimgUrl + 'yjk.jpg'" @tap.stop.prevent="previewImg" />
                            <view class="img_name">样例-印鉴卡</view>
                        </view>
                        <view>
                            <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'dgzm.jpg'" :src="shopimgUrl + 'dgzm.jpg'" />
                            <view class="img_name">样例-对公账户证明</view>
                        </view>
                    </view>
                    <view class="imgitem mt-20">
                        <view>
                            <image class="img_data" :data-item="shopimgUrl + 'dgls.png'" :src="shopimgUrl + 'dgls.png'" @tap.stop.prevent="previewImg" />
                            <view class="img_name">样例-对公账户流水单</view>
                        </view>
                        <view></view>
                    </view>
                </view>
                <view class="combtnbox flexbox-sb">
                    <view class="com_s" @tap.stop.prevent="onBack">上一步</view>
                    <view class="com_x" @tap.stop.prevent="onWin">完成</view>
                </view>
            </van-cell-group>
            <van-cell-group class="mt-20" v-if="main == '企业'">
                <view class="text-r pd-20">结算卡仅支持借记卡，请勿上传贷记卡，贷记卡会无法进行结算!</view>
                <view class="text-r pd-20">银行账号开户名需与上传的身份证名称一致。否则将会审核不通过或造成资金安全风险!</view>
                <van-field
                    :value="accountName"
                    label="开户名"
                    placeholder="请输入开户名"
                    :border="false"
                    @change="onChange($event, { name: 'accountName' })"
                    data-name="accountName"
                />
                <van-field
                    :value="accountNo"
                    label="银行账号"
                    placeholder="请输入银行账号(勿使用二类卡)"
                    :border="false"
                    @change="onChange($event, { name: 'accountNo' })"
                    data-name="accountNo"
                />
                <van-cell
                    class="custom-class"
                    title="开户地址"
                    center
                    is-link
                    :value="zbankRegionCodeSiteName || '请选择开户地址'"
                    @tap.native.stop.prevent="onshowModal($event, { name: 'isShowAreaCodeTree', type: 'kh' })"
                    data-name="isShowAreaCodeTree"
                    data-type="kh"
                />
                <van-cell
                    class="custom-class"
                    title="开户支行"
                    center
                    is-link
                    :value="openUnionNoName || '请选择开户支行'"
                    @tap.native.stop.prevent="onshowModal($event, { name: 'isShowBank', bank: 'zbankRegionCode' })"
                    data-name="isShowBank"
                    data-bank="zbankRegionCode"
                />
                <view v-if="account == '非法人'">
                    <van-field
                        :value="agentCardNo"
                        label="开户身份证号"
                        placeholder="请输入身份证号"
                        :border="false"
                        @change="onChange($event, { name: 'agentCardNo' })"
                        data-name="agentCardNo"
                        maxlength="18"
                    />
                    <view class="flexbox-sb combox">
                        <text class="text">身份证永久有效</text>
                        <van-switch size="20px" :checked="idCardValidity" @change="onChangeStatus($event, { name: 'idCardValidity' })" data-name="idCardValidity" />
                    </view>
                    <view>
                        <van-cell
                            class="custom-class"
                            title="起始有效期"
                            center
                            is-link
                            :value="idCardValidityStart || '请选择起始有效期'"
                            @tap.native.stop.prevent="onshowModal($event, { name: 'isShowTime', timeName: 'idCardValidityStart' })"
                            data-name="isShowTime"
                            data-timeName="idCardValidityStart"
                        />
                        <van-cell
                            v-if="!idCardValidity"
                            class="custom-class"
                            title="结束有效期"
                            center
                            is-link
                            :value="idCardValidityEnd || '请选择结束有效期'"
                            @tap.native.stop.prevent="onshowModal($event, { name: 'isShowTime', timeName: 'idCardValidityEnd' })"
                            data-name="isShowTime"
                            data-timeName="idCardValidityEnd"
                        />
                    </view>
                </view>
                <view class="imgbox">
                    <view class="imgitem" v-if="account != '对公'">
                        <view @tap.stop.prevent="onDownImg" data-name="bankCard">
                            <image class="img_data" :src="bankCardUrl || shopimgUrl + 'noimgsee.png'" />
                            <view class="img_name">银行卡正面照</view>
                        </view>
                        <view>
                            <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'yhkz.jpg'" :src="shopimgUrl + 'yhkz.jpg'" />
                            <view class="img_name">样例</view>
                        </view>
                    </view>
                </view>
                <view class="imgbox" v-if="account == '法人' && account != '对公'">
                    <view class="imgitem">
                        <view @tap.stop.prevent="onDownImg" data-name="priLicAgreement">
                            <image class="img_data" :src="priLicAgreementUrl || shopimgUrl + 'noimgsee.png'" />
                            <view class="img_name">对私结算授权书</view>
                        </view>
                        <view>
                            <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'dswtxy.png'" :src="shopimgUrl + 'dswtxy.png'" />
                            <view class="img_name">样例</view>
                        </view>
                    </view>
                    <view @tap.stop.prevent="onDown">
                        <text class="text-r">注:</text>
                        <text class="text-xz">企业法人对私结算授权书下载与示例>></text>
                    </view>
                </view>
                <view v-if="account == '非法人'">
                    <view class="imgbox">
                        <view class="imgitem">
                            <view @tap.stop.prevent="onDownImg" data-name="agentIdCardFront">
                                <image class="img_data" :src="agentIdCardFrontUrl || shopimgUrl + 'noimgsee.png'" />
                                <view class="img_name">被委托人身份证人像面</view>
                            </view>
                            <view>
                                <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'sfzrx.jpg'" :src="shopimgUrl + 'sfzrx.jpg'" />
                                <view class="img_name">样例</view>
                            </view>
                        </view>
                        <view class="imgitem mt-20">
                            <view @tap.stop.prevent="onDownImg" data-name="agentIdCardBack">
                                <image class="img_data" :src="agentIdCardBackUrl || shopimgUrl + 'noimgsee.png'" />
                                <view class="img_name">被委托人身份证国徽面</view>
                            </view>
                            <view>
                                <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'sfzgh.jpg'" :src="shopimgUrl + 'sfzgh.jpg'" />
                                <view class="img_name">样例</view>
                            </view>
                        </view>
                        <view class="imgitem mt-20">
                            <view @tap.stop.prevent="onDownImg" data-name="agentProtocol">
                                <image class="img_data" :src="agentProtocolUrl || shopimgUrl + 'noimgsee.png'" />
                                <view class="img_name">委托结算授权书</view>
                            </view>
                            <view>
                                <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'wtxy.png'" :src="shopimgUrl + 'wtxy.png'" />
                                <view class="img_name">样例</view>
                            </view>
                        </view>
                        <view class="text-xz" @tap.stop.prevent="onDown">《委托结算授权书》下载</view>
                        <view class="imgitem mt-20">
                            <view @tap.stop.prevent="onDownImg" data-name="holdAgentProtocol">
                                <image class="img_data" :src="holdAgentProtocolUrl || shopimgUrl + 'noimgsee.png'" />
                                <view class="img_name">法人手持委托清算协议照片</view>
                            </view>
                            <view>
                                <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'scwtxy.jpg'" :src="shopimgUrl + 'scwtxy.jpg'" />
                                <view class="img_name">样例</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="imgbox">
                    <view class="imgitem">
                        <view @tap.stop.prevent="onDownImg" data-name="openAccountLicenses">
                            <image class="img_data" :src="openAccountLicensesUrl || shopimgUrl + 'noimgsee.png'" />
                            <view class="img_name">开户许可证</view>
                        </view>
                        <view>
                            <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'dgxkz.jpg'" :src="shopimgUrl + 'dgxkz.jpg'" />
                            <view class="img_name">样例</view>
                        </view>
                    </view>
                </view>
                <view class="text-6">若商户无开户许可证，可提供印鉴卡、对公账户流水单或加盖公司公章的账户证明。</view>
                <view class="imgbox">
                    <view class="imgitem">
                        <view>
                            <image class="img_data" :data-item="shopimgUrl + 'yjk.jpg'" :src="shopimgUrl + 'yjk.jpg'" @tap.stop.prevent="previewImg" />
                            <view class="img_name">样例-印鉴卡</view>
                        </view>
                        <view>
                            <image class="img_data" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'dgzm.jpg'" :src="shopimgUrl + 'dgzm.jpg'" />
                            <view class="img_name">样例-对公账户证明</view>
                        </view>
                    </view>
                    <view class="imgitem mt-20">
                        <view>
                            <image class="img_data" :data-item="shopimgUrl + 'dgls.png'" :src="shopimgUrl + 'dgls.png'" @tap.stop.prevent="previewImg" />
                            <view class="img_name">样例-对公账户流水单</view>
                        </view>
                        <view></view>
                    </view>
                </view>
                <view class="combtnbox flexbox-sb" v-if="tab + 1 != steps.length">
                    <view class="com_s" @tap.stop.prevent="onBack">上一步</view>
                    <view class="com_x" @tap.stop.prevent="onWin">完成</view>
                </view>
            </van-cell-group>
        </view>

        <van-overlay z-index="99999" :show="isShowAreaCodeTree" @click="onClickHide($event, { name: 'isShowAreaCodeTree' })" data-name="isShowAreaCodeTree">
            <view class="box" @tap.stop.prevent="shop">
                <picker-view indicator-style="height: 50px;" class="pickerview" :value="value" @change="bindChangeAreaCodeTree">
                    <picker-view-column>
                        <view style="line-height: 50px; text-align: center" v-for="(item, index) in siteList" :key="index">{{ item.name }}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view style="line-height: 50px; text-align: center" v-for="(item, index) in siteListCity" :key="index">{{ item.name }}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view style="line-height: 50px; text-align: center" v-for="(item, index) in siteListDrovince" :key="index">{{ item.name }}</view>
                    </picker-view-column>
                </picker-view>
                <view class="picker-footer" @tap.stop.prevent="sureAreaCodeTree">
                    <text>确认</text>
                </view>
            </view>
        </van-overlay>

        <van-overlay z-index="99999" :show="isShowBank" @click="onClickHide($event, { name: 'isShowBank' })" data-name="isShowBank">
            <view class="box" @tap.stop.prevent="shop">
                <van-search :value="searchValue" placeholder="请输入搜索关键词" @change="onSearch" />
                <picker-view indicator-style="height: 50px;" class="pickerview" :value="value" @change="bindChangeBank">
                    <picker-view-column>
                        <view style="line-height: 50px; text-align: center" v-for="(item, index) in searchList" :key="index">{{ item.name || item.branchName }}</view>
                    </picker-view-column>
                </picker-view>
                <view class="picker-footer" @tap.stop.prevent="sureBank">
                    <text>确认</text>
                </view>
            </view>
        </van-overlay>

        <van-overlay z-index="99999" :show="isShowTime" @click="onClickHide($event, { name: 'isShowTime' })" data-name="isShowTime">
            <view class="box" @tap.stop.prevent="shop">
                <van-datetime-picker
                    type="date"
                    @confirm="onConfirm($event, { name: 'isShowTime' })"
                    :min-date="minDate"
                    :max-date="maxDate"
                    :formatter="formatter"
                    @cancel="onClickHide($event, { name: 'isShowTime' })"
                    data-name="isShowTime"
                />
            </view>
        </van-overlay>
    </view>
</template>

<script>
// pages/collectioncode/bindcard/auths/index.js
const app = getApp(); // 引入app

const _request = require('../../../../utils/request.js'); // 引入require;

const moment = require('../../../../utils/moment.min');

export default {
    data() {
        return {
            shopimgUrl: app.globalData.shopimgUrl,
            baseurl: app.globalData.baseurl,

            //全局baseurl路径
            mainOld: '',

            // 特殊处理小微企业加的参数
            account: '',

            // 结算方式
            main: '',

            // 主体
            isShowBank: false,

            // 是否展示支行
            isShowTime: false,

            // 是否展示时间
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                }

                if (type === 'month') {
                    return `${value}月`;
                }

                if (type === 'day') {
                    return `${value}日`;
                }

                return value;
            },

            maxDate: new Date(2050, 11, 31).getTime(),
            searchSub: '',

            // 支行搜索
            idCardValidity: false,

            //非法人身份证是否永久有效
            idCardValidityStart: '',

            //非法人身份证注册时间
            idCardValidityEnd: '',

            //非法人身份证注册时间
            accountName: '',

            //开户名
            accountNo: '',

            //银行账号
            agentCardNo: '',

            //开户身份证号
            zbankNo: '',

            //开户支行
            bankCardUrl: '',

            //银行卡正面照
            openAccountLicensesUrl: '',

            //开户许可证
            agentIdCardFrontUrl: '',

            //被委托人身份证人像面
            agentIdCardBackUrl: '',

            //被委托人身份证国徽面
            agentProtocolUrl: '',

            //委托结算授权书
            holdAgentProtocolUrl: '',

            //法人手持委托清算协议照片
            priLicAgreementUrl: '',

            //对私结算授权书
            bankIndex: 0,

            //银行下标
            openUnionNoName: '',

            //开户许可证支行名称
            incomingInfo: null,

            // 进件
            cardDetails: null,

            // 收款卡
            zbankRegionCodeSiteName: '',

            // 地区回显
            isShowAreaCodeTree: false,

            // 是否展示省市区
            siteList: [],

            // 地址
            siteListCity: [],

            // 地址
            siteListDrovince: [],

            // 地址
            indexDrovince: 0,

            //地址的下标
            indexCity: 0,

            //地址的下标
            indexProvince: 0,

            //地址的下标
            // 地区公共赋值变量
            typeArea: '',

            licenceType: '',
            accountType: '',
            accountProxy: '',
            siteListDrovinc: [],
            timeName: '',
            bankType: '',
            storeBoxBankZList: [],
            searchValue: '',
            searchList: '',
            agentPeriodValidityStart: '',
            agentPeriodValidityEnd: '',
            tab: 0,
            steps: [],
            value: '',
            minDate: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        const { account, main } = options;
        const vm = this;
        console.log(options);
        this.setData(
            {
                account,
                main,
                licenceType: main == '企业' ? '0' : '1',
                accountType: account == '对公' ? '0' : '1',
                accountProxy: account == '非法人' ? '1' : '0'
            },
            () => {
                // 动态设置title
                uni.setNavigationBarTitle({
                    title: main == '个体' ? '个体工商户' + '（' + account + '）' : main + '（' + account + '）'
                });
            }
        ); // 支行信息列表

        this.getStoreBoxBankList(); // 获取进件（盒子商户）信息

        _request
            .get('/box/getIncoming', {
                storeId: uni.getStorageSync('storeId')
            })
            .then((res) => {
                if (res.data.code === 200) {
                    const data = res.data.data;
                    this.setData(
                        {
                            incomingInfo: data
                        },
                        () => {
                            vm.getCardDetails(data.shopId);
                        }
                    );
                }
            }); // 地区信息表获取省市区树列表

        _request.get('/box/getAreaCodeTree', {}).then((res) => {
            if (res.data.code === 200) {
                const data = res.data.data;
                this.setData({
                    siteList: data,
                    siteListCity: data[0].children,
                    siteListDrovince: data[0].children[0].children
                });
            }
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 确认选择地址
        sureAreaCodeTree() {
            const { indexProvince, indexCity, indexDrovince, siteListCity, siteListDrovince, siteList, typeArea } = this;
            const vm = this;
            let areaNo;
            let provinceName = '';
            if (typeArea == 'kh') {
                areaNo = 'zbankRegionCode';
                provinceName = 'zbankRegionCodeSiteName';
            }

            if (siteListDrovince.length > 0) {
                this.areaNo = siteListDrovince[indexDrovince].code;
                this.setData(
                    {
                        isShowAreaCodeTree: false
                    },
                    () => {
                        vm.getStoreBoxBankList(siteList[indexProvince].name, siteListCity[indexCity].name);
                    }
                );
            } else {
                this.areaNo = siteListCity[indexCity].code;
                this.setData(
                    {
                        isShowAreaCodeTree: false
                    },
                    () => {
                        vm.getStoreBoxBankList(siteList[indexProvince].name, siteListCity[indexCity].name);
                    }
                );
            }
        },

        // 选择地址
        bindChangeAreaCodeTree(e) {
            const { siteList, siteListCity, siteListDrovince } = this;
            const indexProvince = e.detail.value[0];
            const indexCity = e.detail.value[1];
            const indexDrovince = e.detail.value[2];
            this.setData(
                {
                    siteListCity: siteList[indexProvince].children,
                    indexProvince,
                    indexCity,
                    indexDrovince,
                    siteListDrovinc: []
                },
                () => {
                    // 异步赋值
                    this.setData({
                        siteListDrovince: this.siteListCity[indexCity].children
                    });
                }
            );
        },

        // 确认选择银行
        sureBank() {
            const { searchList, bankIndex, bankType } = this;
            const vm = this;
            let name;
            let id = '';

            if (bankType == 'zbankRegionCode') {
                name = 'openUnionNoName';
                id = 'zbankNo';
            }

            this.name = searchList[bankIndex].name || searchList[bankIndex].branchName;

            this.setData({
                isShowBank: false
            });
        },

        // 图片公共上传
        onDownImg(e) {
            const name = e.currentTarget.dataset.name;
            const vm = this;
            uni.chooseMedia({
                count: 1,
                mediaType: ['image'],

                success(res) {
                    console.log(res);
                    const tempFilePaths = res.tempFiles[0].tempFilePath;
                    uni.uploadFile({
                        url: vm.baseurl + '/store-api/box/boxFileUpload',
                        filePath: tempFilePaths,
                        name: 'file',
                        header: {
                            token: uni.getStorageSync('token') || null
                        },
                        formData: {
                            file: 'file'
                        },

                        success(res) {
                            const resNew = JSON.parse(res.data);

                            if (resNew.code == 200) {
                                const data = resNew.data;
                                vm.nameUrl = data.url;
                                vm[e.currentTarget.dataset.name] = data.boxFileName;
                            } else {
                                uni.showToast({
                                    title: '上传失败',
                                    icon: 'none'
                                });
                            }

                            console.log(vm);
                        },

                        fail(error) {},

                        complete(res) {}
                    });
                }
            });
        },

        // 时间公共赋值
        onConfirm(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            const name = this.timeName;
            console.log(e, name);
            this.timeName = moment(e.detail).format('YYYYMMDD');
            this.setData({
                isShowTime: false
            });
        },

        //下载pdf
        onDown() {
            const url = this.account == '法人' ? 'https://iboxpay.kf5.com/hc/kb/article/1521604/' : 'https://iboxpay.kf5.com/hc/kb/article/1472077/';
            uni.showToast({
                title: '复制成功,请在浏览器打开'
            });
            uni.setClipboardData({
                data: url,
                success: function (res) {
                    uni.getClipboardData({
                        //这个api是把拿到的数据放到电脑系统中的
                        success: function (res) {}
                    });
                }
            });
        },

        // input 公共赋值
        onChange(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            const name = e.currentTarget.dataset.name;
            this[e.currentTarget.dataset.name] = e.detail;
        },

        // 公共关闭弹窗
        onClickHide(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            const name = e.currentTarget.dataset.name;
            this[e.currentTarget.dataset.name] = false;
        },

        // 公共打开弹窗
        onshowModal(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            const name = e.currentTarget.dataset.name;
            const vm = this; // 时间弹窗额外处理，公共赋值变量

            if (e.currentTarget.dataset.timename) {
                const timeName = e.currentTarget.dataset.timename;
                this[e.currentTarget.dataset.name] = true;
                this.setData({
                    timeName
                });
            } // 地区弹窗额外处理，公共赋值变量

            if (e.currentTarget.dataset.type) {
                this[e.currentTarget.dataset.name] = true;
                this.setData({
                    typeArea: e.currentTarget.dataset.type
                });
            } // 银行弹窗额外处理，公共赋值变量

            const bank = e.currentTarget.dataset.bank;

            if (bank) {
                this[e.currentTarget.dataset.name] = true;
                this.setData({
                    bankType: bank,
                    storeBoxBankZList: [],

                    // 开户支银行list
                    searchValue: '',

                    searchSub: ''
                });
            }
        },

        // 银行搜索
        onSearch(e) {
            const { bankType } = this;
            const value = e.detail;
            console.log(bankType);
            const vm = this;
            let name = '';

            if (bankType == 'tbStoreBoxBank' || bankType == 'zbankRegionCodeZ') {
                name = 'searchSum';
            } else if (bankType == 'storeBoxBankZList' || bankType == 'zbankRegionCode') {
                name = 'searchSub';
            }

            this.setData({}, () => {
                clearTimeout(vm.TimeID);
                vm.TimeID = setTimeout(() => {
                    vm.getStoreBoxBankList();
                }, 1000);
            });
        },

        // 选择银行
        bindChangeBank(e) {
            const bankIndex = e.detail.value[0];
            this.setData({
                bankIndex
            });
        },

        // 支行信息列表
        getStoreBoxBankList(provinceName, cityName) {
            const { searchSub } = this;
            console.log(this);

            _request
                .get('/box/getStoreBoxBankList', {
                    search: this.searchSub,
                    provinceName: provinceName || '',
                    cityName: cityName || ''
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        const data = res.data.data;
                        this.setData({
                            searchList: data
                        });
                    }
                });
        },

        // 公共状态开关
        onChangeStatus(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            const name = e.currentTarget.dataset.name;
            this[e.currentTarget.dataset.name] = !this[name];

            if (name == 'isagentPeriodValidity') {
                this.setData({
                    agentPeriodValidityStart: '',
                    agentPeriodValidityEnd: ''
                });
            }
        },

        //点击图片进行预览，长按保存分享图片
        previewImg(e) {
            uni.previewImage({
                current: e.currentTarget.dataset.item,
                // 当前显示图片的http链接
                urls: [e.currentTarget.dataset.item] // 需要预览的图片http链接列表
            });
        },

        // 上一步
        onBack() {
            uni.navigateBack({
                delta: 0
            });
        },

        // 完成
        onWin() {
            const {
                idCardValidity,
                //非法人身份证是否永久有效
                idCardValidityStart,
                //非法人身份证注册时间
                idCardValidityEnd,
                //非法人身份证注册时间
                accountName,
                //开户名
                accountNo,
                //银行账号
                agentCardNo,
                //开户身份证号
                zbankNo,
                //开户支行
                bankCardUrl,
                //银行卡正面照
                openAccountLicensesUrl,
                //开户许可证
                agentIdCardFrontUrl,
                //被委托人身份证人像面
                agentIdCardBackUrl,
                //被委托人身份证国徽面
                agentProtocolUrl,
                //委托结算授权书
                holdAgentProtocolUrl,
                //法人手持委托清算协议照片
                priLicAgreementUrl,
                //对私结算授权书
                openUnionNoName,
                account,
                main,
                zbankRegionCode,
                incomingInfo,
                zbankRegionCodeSiteName,
                cardDetails
            } = this;
            const isNumber = /^[0-9]*$/;
            const regIDCard = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
            let agentCardDate;

            if (account == '非法人') {
                if (idCardValidity) {
                    agentCardDate = idCardValidityStart + '-99990101';
                } else {
                    agentCardDate = idCardValidityStart + '-' + idCardValidityEnd;
                }
            }

            const data = {
                accountName,
                accountNo,
                zbankNo,
                accountType: account == '对公' ? 0 : 1,
                accountProxy: account == '非法人' ? 1 : 0,
                acctZbankCode: zbankRegionCode,
                agentCardDate,
                alterType: account == '对公' ? 0 : '法人' ? 1 : 2,
                id: cardDetails?.id || '',
                idCard: agentCardNo,
                shopId: incomingInfo.shopId,
                mchtNo: incomingInfo.mchtNo,
                openUnionNoName,
                zbankRegionCodeSiteName,
                photoList: [
                    {
                        mediaCode: 'bankCard',
                        mediaPath: bankCardUrl
                    },
                    {
                        mediaCode: 'openAccountLicenses',
                        mediaPath: openAccountLicensesUrl
                    },
                    {
                        mediaCode: 'priLicAgreement',
                        mediaPath: priLicAgreementUrl
                    },
                    {
                        mediaCode: 'agentProtocol',
                        mediaPath: agentProtocolUrl
                    },
                    {
                        mediaCode: 'agentIdCardFront',
                        mediaPath: agentIdCardBackUrl
                    },
                    {
                        mediaCode: 'agentIdCardBack',
                        mediaPath: agentIdCardFrontUrl
                    },
                    {
                        mediaCode: 'holdAgentProtocol',
                        mediaPath: holdAgentProtocolUrl
                    }
                ]
            };
            console.log(data);

            if (!accountName) {
                uni.showToast({
                    title: '请输入开户名',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!accountNo || !isNumber.test(accountNo)) {
                uni.showToast({
                    title: accountNo ? '银行卡卡号需为数字' : '请输入银行账号',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!zbankRegionCodeSiteName) {
                uni.showToast({
                    title: '请选择开户地址',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!openUnionNoName) {
                uni.showToast({
                    title: '请选择开户支行',
                    icon: 'none',
                    duration: 1500
                });
            } else if ((!agentCardNo || !regIDCard.test(agentCardNo)) && account == '非法人') {
                uni.showToast({
                    title: !agentCardNo ? '请输入身份证号' : '请输入正确法人身份证号',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!idCardValidityStart && account == '非法人') {
                uni.showToast({
                    title: '请选择起始有效期',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!idCardValidity && !idCardValidityEnd && account == '非法人') {
                uni.showToast({
                    title: '请选择结束有效期',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!bankCardUrl && account != '对公') {
                uni.showToast({
                    title: '请上传银行卡正面照',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!priLicAgreementUrl && main == '企业' && account == '法人') {
                uni.showToast({
                    title: '请上传对私结算授权书照',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!agentIdCardBackUrl && account == '非法人') {
                uni.showToast({
                    title: '请上传被委托人身份证人像面照',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!agentIdCardFrontUrl && account == '非法人') {
                uni.showToast({
                    title: '请上传被委托人身份证国徽面照',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!agentProtocolUrl && account == '非法人') {
                uni.showToast({
                    title: '请上传委托结算授权书照',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!holdAgentProtocolUrl && account == '非法人') {
                uni.showToast({
                    title: '请上传法人手持委托清算协议照',
                    icon: 'none',
                    duration: 1500
                });
            } else if (!openAccountLicensesUrl && (main == '企业' || account == '对公')) {
                uni.showToast({
                    title: '请上传开户许可证照',
                    icon: 'none',
                    duration: 1500
                });
            } else {
                _request.postObj('/box/saveOrUpdateCard', { ...data }).then((res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '提交成功'
                        });
                        uni.navigateTo({
                            url: '/pages/collectioncode/index'
                        });
                    } else if (res.data.code === 400) {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });
            }
        },

        // 查询收款卡
        getCardDetails(shopId) {
            // 获取失败的
            _request
                .get('/box/getCardDetails', {
                    shopId,
                    status: 0
                })
                .then((res) => {
                    const cardDetails = res.data.data;

                    if (res.data.code === 200) {
                        this.setData({
                            cardDetails
                        });
                    }
                });
        },

        shop() {
            console.log('占位：函数 shop 未声明');
        }
    }
};
</script>
<style>
/* pages/collectioncode/bindcard/auths/index.wxss */
.imgbox {
    margin-top: 20rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background: #fff;
}

.imgitem {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
}

.imgitem > view {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: min-content;
}

.img_name {
    width: 100%;
    font-size: 24rpx;
    color: #666;
    line-height: 30rpx;
    text-align: center;
    margin-top: 10rpx;
    font-weight: 900;
}

.img_data {
    width: 300rpx;
    height: 200rpx;
    border-radius: 10px;
}

.text-r {
    color: #ee0a24;
    text-align: left;
    padding: 10rpx 0rpx;
    background: #fff;
    line-height: 40rpx;
    font-size: 24rpx;
}

.text-6 {
    color: #666;
    font-size: 24rpx;
    padding: 0 30rpx;
    line-height: 60rpx;
    width: 100%;
    box-sizing: border-box;
}

.text-xz {
    color: rgb(14, 129, 223);
    font-size: 24rpx;
    padding-right: 20rpx;
    line-height: 60rpx;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
}

.combtnbox {
    padding: 30rpx 40rpx;
    background: #fff;
    box-sizing: border-box;
}

.combtnbox > view {
    width: 300rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 24rpx;
    border-radius: 44px;
    text-align: center;
}

.com_s {
    border: 1px solid #ff8722;
    color: #ff8722;
}

.com_x {
    background: #ff8722;
    color: #fff;
}

.pd-20 {
    padding: 0 30rpx;
}

.custom-class {
    height: 100rpx !important;
}

.custom-class .van-cell__value {
    text-align: left !important;
    position: relative !important;
    left: -124rpx !important;
}

.combox {
    height: 60rpx;
    line-height: 60rpx;
    background: #fff;
    padding: 0 30rpx;
}

.text {
    color: var(--field-label-color, #646566);
    font-size: 14px;
}

.box {
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: 0;
}

.pickerview {
    bottom: 88rpx;
    height: 300rpx;
    margin-bottom: 40rpx;
}

.picker-footer {
    width: 400rpx;
    height: 88rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    background-color: #ff8722;
    border-radius: 44rpx;
    margin: 30rpx 175rpx;
    color: #fff;
}
</style>
